<template>
  <div id="department">
    <el-container>
      <!-- 科室搜索 -->
      <el-header>
        <el-input v-model="keyword" placeholder="科室编码" style="width: 120px; margin-left: 1px;"></el-input>
        <el-input v-model="keyword2" placeholder="科室名称" style="width: 120px; margin-left: 1px;"></el-input>
        <el-select style="margin-left: 2px; width: 100px;" v-model="keyword3" placeholder="全部">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>

        </el-select>
        <el-button @click="getList()" type="primary" icon="el-icon-search" style="margin-left: 1px;">搜索科室</el-button>
        <el-button @click="addDepart()" type="primary" icon="el-icon-edit" style="margin-left: 4px;">新增科室</el-button>
        <el-button  @click="exportExcel" type="primary" style="margin-left:5px;" icon="el-icon-download">导出科室</el-button>

        <el-button @click="idsDelete" type="danger" style="margin-left:2px;" icon="el-icon-download ">批量删除</el-button>
   <span>
     <span>

          <el-upload
                class="upload-demo"

               :action="BASE_API+'/department/importExcel'"
                 accept=".xlsx"

                :file-list="fileList">
                <el-button  type="primary" icon="el-icon-folder-add" @click="importExcel">导入科室</el-button>
                 </el-upload>
                   <el-button icon="el-icon-download" @click="downloadTemplate">点击下载模板</el-button>
</span>

</span>
      </el-header>
      <el-main>
        <el-table
         ref="multipleTable"
         :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          >
          <el-table-column type="selection" show-overflow-tooltip prop="table">
          </el-table-column>
          <el-table-column label="科室编码" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.deptCode}}</template>
          </el-table-column>
          <el-table-column prop="deptName" label="科室名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="constantName" label="科室分类" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="deptType" label="所属科室类型" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="delMark" label="删除状态" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="caozuo" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateInfo(scope.row)">修改
              </el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-main>
        <el-pagination
         @size-change="handleSizeChange"
         @current-change="getList"
         :current-page="page"
         :page-size="limit"
          background style="text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </el-container>
    <!-- 新增科室 -->
<el-dialog title="新增科室" :visible.sync="dialogFormVisible">
<el-form :model="addForm"  ref="addForm" label-width="100px">
  <el-form-item label="科室编码" >
    <el-input v-model="addForm.deptCode" autocomplete="off" prop="deptCode"></el-input>
  </el-form-item>
  <el-form-item label="科室名称" >
    <el-input  v-model="addForm.deptName" autocomplete="off" prop="deptName"></el-input>
  </el-form-item>
  <el-form-item label="科室分类" >
    <el-input v-model.number="addForm.deptCategoryID" prop="deptCategoryID"></el-input>
  </el-form-item>
<el-form-item label="科室类别" label-width="120px" prop="deptType">
            <el-select v-model="addForm.deptType" placeholder="请选择"  class="header_select">
                      <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addItem">确 定</el-button>
        </div>
</el-form>
</el-dialog>

      <!-- 修改科室 -->
      <el-dialog title="修改科室" :visible.sync="dialogFormVisible2" >
        <el-form :model="updateForm">
          <el-form-item label="科室编码" label-width="100px">
            <el-input  v-model="updateForm.deptCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="科室名称" label-width="100px">
            <el-input   v-model="updateForm.deptName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="科室分类" label-width="100px">
            <el-select v-model="updateForm.deptType" placeholder="请选择"  class="header_select">
                      <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" >
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="updateItem">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
  import department from '@/api/his/department'
  import global from '@/utils/global'
  import {
    MessageBox
  } from "element-ui";
  export default {
    created() {
      this.getList();

    },
    data() {
      return {
        BASE_API: global.Base_Api, // 接口API地址
        keyword: '',
        keyword2: '',
        keyword3: 0,
        table: '',
        fileList: [], //上传列表
        list: null, // 数据列表
        total: 0, // 总记录数
        page: 1, // 页码
        limit: 10, // 每页记录数

        options: [{
          		value: '1',
            label: '临床'
         	},
          {
            value: '2',
            label: '医技'
          },
         	{
            value: '3',
            label: '财务'
          },
          {
            value: '4',
            label: '行政'
          },
          {
            value: '5',
            label: '其他'
          },
          {
            value: '0',
          		label: '全部'
          },

        ],
         multipleSelection: [],
                  // 添加表单
                  addForm:{
                    deptType:null,
                    deptCode:null,
                    deptName:null,
                    deptCategoryID:11
                  },
                  updateForm:{
                    deptType:null,
                    deptCode:null,
                    deptName:null,
                    id:null
                  },
                  dialogFormVisible:false,
                  dialogFormVisible2:false
                };
      },

    methods: {
      addDepart() {
                     this.dialogFormVisible = true
                 },
                 addItem(){
                       department.addDepartment(this.addForm).then((res) => {
                         console.log(res)
                         this.$message({
                             type: "success",
                             message: "添加成功!",
                           });
                           this.dialogFormVisible = false
                          this.addForm ={
                             deptType:null,
                             deptCode:null,
                             deptName:null,
                             deptCategoryID:29
                         },
                           this.getList();
                       }).catch((err) => {
                         console.log(err)
                       });
                 },
                 //修改
                 updateInfo(scope){
                   this.dialogFormVisible2 = true
                 this.updateForm = {
                                         deptType : scope.deptType,
                                         deptName : scope.deptName,
                                         deptCode : scope.deptCode,
                                         id : scope.id
                                     }

                    console.log(this.updateForm)
                 },
                 updateItem(){
                       department.updateDepartment(this.updateForm).then((res) => {
                         console.log(res)
                         this.$message({
                             type: "success",
                             message: "修改成功!",
                           });
                           this.dialogFormVisible2 = false

                           this.getList();
                       }).catch((err) => {
                         console.log(err)
                       });
                 },
                 //删除
                 handleDelete(id){

                       department.delDepartmentById(id).then((res) => {
                         console.log(res)
                         this.$message({
                             type: "success",
                             message: "删除成功!",
                           });


                           this.getList();
                       }).catch((err) => {
                         console.log(err)
                         this.$message({
                             type: "error",
                             message: "删除失败!",
                           });
                       });
                 },
                 idsDelete(){
                  //this.multipleSelection 批量删除
                       department.delDeparByIds(this.multipleSelection).then((res) => {
                         console.log(res)
                         this.$message({
                             type: "success",
                             message: "删除成功!",
                           });


                           this.getList();
                       }).catch((err) => {
                         console.log(err)
                         this.$message({
                             type: "error",
                             message: "删除失败!",
                           });
                       });
                 },

      // 请求接口获取数据
      getList(page = 1) {
        this.page = page;
        department
          .getDepartmentListPage(this.page, this.limit, this.keyword, this.keyword2, this.keyword3)
          .then((res) => {
            console.log(res);
            this.list = res.data.data.list;
            this.total = res.data.data.total;
            console.log(this.list);
          }) //请求成功
          .catch((error) => {
            console.log(error);
          }); //请求失败
      },
      //下载模板
      downloadTemplate() {
        let a = document.createElement('a')
        a.href = './file.xlsx'
        a.download = '文件模板.xlsx'
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
      },


      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // 表行选中触发的事件
          handleSelectionChange(val){
              this.multipleSelection = []
              val.forEach(item => {
                 const id = item.id
                 //判断数组中是否包含某个值
                 if (this.multipleSelection.indexOf(id) == -1) {
                     this.multipleSelection.push(id)
                 }
             })
              console.log(this.multipleSelection)
          },
          // 导入excel
          importExcel(){
            department
              .importDepartExcel()
              .then((res) => {
              console.log(response)
              if(res.code == 20000){
                  this.$message.success("添加成功")
                  this.getList()
              }else{
                this.$message.error("添加失败")
              }
              })

          },
            // 导出科室
              exportExcel(){
                    department.exportDepartExcel().then((res) => {
                      console.log(res)
                        const url = `${global.Base_Api}/department/exportExcel`;
                        const fileName = '科室信息.xlsx';
                        const link = document.createElement('a')
                        link.href = url;
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                      this.$message({
                              type: "success",
                              message: "导出成功!",
                            });
                    }).catch((err) => {
                      this.$message({
                              type: "error",
                              message: "导出失败!",
                            });
                    });
                  },

    },


    computed() {
      baseApi: {
        return global.Base_Api;
      }
    }
  };
</script>

<style scoped>
  span {
    float: right;
  }
.upload-demo{
   display: inline-block;
}

</style>
